<template>
	<view class="Assemble_goods">
		<swiper class="swiper" indicator-dots indicator-active-color="#fff">
			<swiper-item v-for="(item, index) in goodData.img" :key="index"><image :src="item" mode=""></image></swiper-item>
		</swiper>
		<view class="price" :style="{ background: newColor.color }" v-show="false">
			<p class="left">
				<text class="text1">¥{{ goodData.price }}</text>
				<text class="text2">¥{{ goodData.disuse_price }}</text>
			</p>
			<view class="right">
				<p :style="{ color: newColor.color }">距离活动结束：</p>
				<van-count-down millisecond use-slot :time="time" @change="onChange" class="countdown">
					<text class="item" :style="{ backgroundColor: newColor.color }">{{ timeData.days }}</text>
					:
					<text class="item" :style="{ backgroundColor: newColor.color }">{{ timeData.hours }}</text>
					:
					<text class="item" :style="{ backgroundColor: newColor.color }">{{ timeData.minutes }}</text>
					:
					<text class="item" :style="{ backgroundColor: newColor.color }">{{ timeData.seconds }}</text>
					:
					<text class="item" :style="{ backgroundColor: newColor.color }">{{ timeData.milliseconds }}</text>
				</van-count-down>
			</view>
		</view>
		<view class="goods_name">
			<p class="left">
				<text class="text1">¥{{ goodData.price }}</text>
				<text class="text2" v-if="goodData.disuse_price">¥{{ goodData.disuse_price }}</text>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="fx_btn" :style="{ background: newColor.color }">
					<image src="../../../static/img/home/fenxiang.png" mode="" class="ewm"></image>
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image src="../../../static/img/home/fenxiang.png" mode="" class="h5ewm" :style="{ background: newColor.color }" @tap="jumpMyQr"></image>
				<!-- #endif -->
			</p>
			<p class="p1">
				<image class="hot_ig" :src="goodData.tag_img" mode="" v-if="goodData.tag_type == 2"></image>
				<text class="hot" v-if="goodData.tag_type == 1" :style="{ backgroundColor: newColor.color }">{{ goodData.tag_content }}</text>
				<text class="text1" :style="{ color: newColor.color, borderColor: newColor.color }">{{ goodData.p_num }}人团</text>
				<text class="text2">{{ goodData.title }}</text>
			</p>
			<p class="p2">
				<text class="text1">累计{{ goodData.sales }}份</text>
				<text style="margin: 0 10upx;">|</text>
				<text class="text2" :style="{ color: newColor.color }">剩余{{ goodData.inventory }}份</text>
			</p>
		</view>
		<view class="goods_bottom">
			<p class="p1">
				<text class="text1">预计到货时间</text>
				<text class="text2">{{ goodData.get_date }}</text>
			</p>
			<view class="bottom_box" v-if="teamList.length !== 0">
				<view class="view1">
					<p class="p2">
						<image :src="teamList[0].head_img" mode=""></image>
						<text>{{ teamList[0].username }}</text>
					</p>
					<p class="p3" v-if="teamList[0].team_end_time">
						<text class="text1">
							还差
							<text :style="{ color: newColor.color }">{{ teamList[0].team_num_less }}人</text>
							拼成
						</text>
						<text class="text2">剩余:</text>
						<uni-countdown
							colors="#ffffff"
							:background-color="newColor.color"
							border-color="#fff"
							style="float: left;"
							:show-day="false"
							:hour="setTime(teamList[0].team_end_time).hours"
							:minute="setTime(teamList[0].team_end_time).minutes"
							:second="setTime(teamList[0].team_end_time).second"
						></uni-countdown>
						:
						<text class="item" :style="{ backgroundColor: newColor.color }">{{ times }}</text>
					</p>
					<text class="goto" :style="{ background: newColor.color }" @click="gotoAdd(teamList[0])">当前团队</text>
				</view>
			</view>
			<p class="p1">
				<text class="text1">服务点</text>
				<image src="../../../static/img/right.png" mode="" class="right"></image>
				<text class="text2" @tap="setPostion">{{ postion.shop_name || '请选择服务点' }}</text>
			</p>
			<p class="p1">
				<text class="text1">服务点</text>
				<image src="../../../static/img/right.png" mode="" class="right"></image>
				<text class="text2" @tap="setMaster">{{ master.user_name || '请选择服务点' }}</text>
				<image :src="master.head_img" mode="" v-if="master !== ''"></image>
			</p>
		</view>
		<p class="submit" :style="{ background: newColor.color }" @tap="onpintuan">去参团</p>
		<uni-popup ref="popup" type="center">
			<view class="pop_box" style="min-height: 500upx;">
				<view class="view1" v-for="(item, index) in grouplist" :key="index">
					<p class="p2">
						<image :src="item.head_img" mode=""></image>
						<text>{{ item.username }}</text>
					</p>
					<p class="p3">
						<text class="text1">
							还差
							<text style="color: #F23A3A;">{{ item.team_num_less }}人</text>
							拼成
						</text>
						<text class="text2">剩余:</text>
						<uni-countdown
							colors="#FFFFFF"
							:background-color="newColor.color"
							border-color="#fff"
							style="float: left;"
							:show-day="false"
							:hour="setTime(item.team_end_time).hours"
							:minute="setTime(item.team_end_time).minutes"
							:second="setTime(item.team_end_time).second"
						></uni-countdown>
						<text class="item" :style="{ backgroundColor: newColor.color }">{{ times }}</text>
					</p>
					<text class="goto" :style="{ background: newColor.color }" @click="gotoAdd(item)">去参团</text>
				</view>
			</view>
			<image src="../../static/image/close.png" mode="" class="close" @tap="close"></image>
		</uni-popup>
		<uni-popup ref="popup1" type="center">
			<view class="pop_box">
				<p class="p4">
					还差
					<text :style="{ color: newColor.color }">{{ nowdata.team_num_less }}人</text>
					拼成
				</p>
				<p class="p5">
					<text>剩余:</text>
					<uni-countdown
						colors="#ffffff"
						:background-color="newColor.color"
						border-color="#fff"
						style="float: left;"
						:show-day="false"
						:hour="setTime(nowdata.team_end_time).hours"
						:minute="setTime(nowdata.team_end_time).minutes"
						:second="setTime(nowdata.team_end_time).second"
					></uni-countdown>
					<text class="item" :style="{ backgroundColor: newColor.color }">{{ times }}</text>
				</p>
				<view class="people">
					<p class="have_data" v-for="(item, index) in nowdata.team_list" :key="index">
						<image :src="item.head_img" mode="" :style="{ borderColor: newColor.color }"></image>
						<text>{{ item.username }}</text>
					</p>
					<p class="not_data" v-for="item in nowdata.team_num_less" :key="item"><image src="" mode="" :style="{ borderColor: newColor.color }"></image></p>
				</view>
				<p class="nowAdd" :style="{ background: newColor.color }" @tap="onpintuan">立即参团</p>
			</view>
			<image src="../../static/image/close.png" mode="" class="close" @tap="close1"></image>
		</uni-popup>
		<ourLoading isFullScreen :active="active" text="loading..." />
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
			<view class="mask"></view>
			<view class="layers layer" @tap.stop="discard">
				<scroll-view scroll-y="true" class="sku_scroll">
					<!-- 第一层 -->
					<view class="lists" v-for="(item, n) in sku" :key="n">
						<p class="sku_name">{{ item.title }}</p>
						<view class="list_box">
							<p
								v-for="(item1, index) in item.goods_spec_item"
								:key="index"
								@click="setSkuList(item1.item_title, n, index)"
								:style="{ color: subIndex[n] == index ? newColor.color : '', borderColor: subIndex[n] == index ? newColor.color : '' }"
								v-bind:class="[item1.isShow ? '' : 'noneActive', subIndex[n] == index ? 'productActive' : '']"
							>
								{{ item1.item_title }}
							</p>
						</view>
					</view>
				</scroll-view>
				<view class="price_box">
					<p class="kucun">库存：{{ kucun || 0 }}</p>
					<view class="number">
						<view class="sub" @tap.stop="sub(row)"><view class="icon jian"></view></view>
						<view class="input" @tap.stop="discard"><input type="number" v-model="number" @input="sum" /></view>
						<view class="add" :style="{ background: number < kucun ? newColor.color : '#f2f2f2' }" @tap.stop="add(row)"><view class="icon jia"></view></view>
					</view>
					<p class="p1">
						<text class="text1">已选规格：</text>
						<text class="text2" v-if="item" v-for="(item, index) in selectArr" :key="index">{{ item }}</text>
					</p>
					<view class="bottom">
						<p class="left">￥{{ numprice || 0 }}</p>
						<p class="right" :class="[kucun == 0 ? 'noactive' : '']" @tap="ongoto">确定</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { getUserInfo, getToken, setRecommend, setGoodData, removeGoodId, getGoodId } from '../../../static/utils/ahth.js';
import sku from '../../../components/sku/sku.vue';
export default {
	components: {
		uniCountdown,
		uniPopup,
		sku
	},
	data() {
		return {
			active: true,
			goodData: {},
			postion: {},
			grouplist: [],
			ceshi: 10,
			nowdata: {},
			userInfo: getUserInfo(),
			specClass: '',
			selectArr: [],
			shopItemInfo: {},
			subIndex: [],
			price: 0,
			numprice: 0,
			optionName: '',
			kucun: 0,
			sku: [],
			skuAllData: [],
			number: 1,
			optionId: '',
			formData: '',
			master: {},
			timeData: {},
			noData: {},
			dataList: [],
			times: 0,
			timeInter: '',
			teamId: '',
			teamList: []
		};
	},
	onLoad(option) {
		let goodid = getGoodId();
		if (goodid && goodid !== '') {
			this.goodid = goodid;
		} else {
			let uid = '';
			if (option.goodid && option.goodid !== '') {
				this.goodid = option.goodid;
				this.teamId = option.teamId;
			}
			if (option.pid && option.pid !== '') {
				setRecommend(option.pid);
			}
		}
	},
	onShow() {
		if (this.$Route.query.goodid) {
			this.goodid = this.$Route.query.goodid;
		}
		this.getGoodData();
		this.getUserInfos();
		setTimeout(() => {
			this.active = false;
		}, 400);
	},
	onShareAppMessage: function(ret) {
		//**** 在这里配置弹出的分享框的内容
		let uid = this.userInfo.user_id || '';
		return {
			title: this.goodData.title, // 设置弹出框的标题
			path: `/pagesA/pages/goods/assembleDetails?pid=${uid}&goodid=${this.goodid}`, //设置弹出框分享出去的链接地址
			imageUrl: this.goodData.img[0], //设置弹出框分享出去的图片
			success: function(res) {
				console.log(res);
			}
		};
	},
	onHide() {
		console.log('页面隐藏了');
		// this.pause()
		clearInterval(this.timeInter);
	},
	onUnload() {
		console.log('页面离开了');
		// this.pause()
		clearInterval(this.timeInter);
	},
	methods: {
		setHaomiao() {
			let that = this;
			clearInterval(that.timeInter);
			that.times = 99;
			that.timeInter = setInterval(() => {
				if (that.times > 0) {
					that.times--;
				} else {
					that.times = 99;
				}
			}, 20);
		},
		openpop() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		pause() {
			const countDown = this.selectComponent('.countdown');
			countDown.pause();
		},
		hideSpec() {
			console.log('点击了');
			//回调
			this.specClass = 'hide';
			setTimeout(() => {
				this.specClass = 'none';
			}, 200);
		},
		onChange(e) {
			// e.detail.milliseconds = (e.detail.milliseconds / 10).toFixed(0)
			// this.timeData = e.detail
		},
		onChangenoData(e) {
			// e.detail.milliseconds = (e.detail.milliseconds / 10).toFixed(0)
			// this.noData = e.detail
		},
		onChangeItem(e) {
			e.detail.milliseconds = (e.detail.milliseconds / 10).toFixed(0);
			let timeData = e.detail;
			let index = e.target.dataset.item;
			this.dataList[index] = e.detail;
		},
		setPostion() {
			//选择提货点
			this.$Router.push({
				path: '/pages/home/setlocation',
				query: {
					goodid: this.goodid,
					status: 1
				}
			});
		},
		setMaster() {
			//选择服务点			
			this.$Router.push({
				path: '/pages/home/setMaster',
				query: {
					goodid: this.goodid,
					status: 1
				}
			});
		},
		gotoAdd(item) {
			//去参团
			this.nowdata = item;
			this.$refs.popup.close();
			this.$refs.popup1.open();
		},
		close1() {
			this.$refs.popup1.close();
		},
		getUserInfos() {
			this.request('user/getUserInfo', {}).then(res => {
				// this.locationId = res.data.goods_point_id;
				this.getdefault(res.data.goods_point_id);
				this.getMasters(res.data.leader_id);
			});
		},
		getdefault(id) {
			//获取用户默认的提货点
			this.request('user/getGoodsPointLeaderInfo', {
				type: 1,
				type_id: id
			}).then(res => {
				console.log(res);
				this.postion = res.data;
			});
		},
		getMasters(id) {
			this.request('user/getGoodsPointLeaderInfo', {
				type: 2,
				type_id: id || ''
			}).then(res => {
				console.log(res);
				this.master = res.data;
			});
		},
		discard() {
			//丢弃
		},
		getGoodData() {
			//获取商品详情
			this.request('goods/getGoodsDetail', {
				id: this.goodid,
				group: 1
			}).then(res => {
				console.log(res);
				this.goodData = res.data.goods_info;
				if (res.data.group_list) {
					this.grouplist = res.data.group_list;
					this.grouplist.forEach(e => {
						if (e.team_id == this.teamId) {
							this.teamList.push(e);
						}
					});
					console.log('默认参团的人', this.teamList);
					this.setHaomiao();
				}
				removeGoodId();
			});
		},
		setFrom(html) {
			//处理富文本 让图片居中适应
			let newContent = html.replace(/\<img/gi, '<img class="rich-img" ');
			console.log(newContent);
			this.formData = newContent;
		},
		onskuSubmit(data) {
			//完成商品选择
			console.log(data);
			data.push(this.goodData);
			setGoodData(data); //存储商品信息 跳转到提交订单页面
			this.$Router.push({
				path: '/pagesA/pages/order/confirmation',
				query: {
					group: 1,
					iscart: 0
				}
			});
		},
		onpintuan() {
			if (!getToken() || getToken() == '') {
				uni.showModal({
					title: '提示',
					content: '您还没有登录,是否前去登录?',
					confirmColor: this.newColor.color,
					confirmText: '去登录',
					success: res => {
						if (res.confirm) {
							this.$Router.push({ path: '/pages/login/login' });
						}
					}
				});
				return;
			}
			if (!this.postion.shop_name || this.postion.shop_name == '') {
				uni.showToast({
					title: '请选择服务点',
					icon: 'none'
				});
				return;
			}
			if (!this.master.user_name || this.master.user_name == '') {
				uni.showToast({
					title: '请选择服务点',
					icon: 'none'
				});
				return;
			}
			//弹出选择规格的状态框
			console.log(this.goodData.is_option);
			if (this.goodData.is_option == 0) {
				this.nowadd();
			} else {
				this.$refs.popup1.close();
				this.specClass = 'show';
				// this.specCallback = fun;
				//去拼团
				this.setSku();
				let data = [];
			}
			console.log('show');
		},
		ongoto() {
			this.goodData.price = this.price;
			this.goodData.num = this.number;
			this.goodData.option_title = this.optionName;
			this.nowadd();
		},
		nowadd() {
			//去参团
			console.log(this.optionId);
			console.log(this.nowdata);
			let data = [];
			this.goodData.option_id = this.optionId;
			data.push(this.goodData);
			setGoodData(data);
			this.$refs.popup1.close();
			this.$Router.push({
				path: '/pagesA/pages/order/confirmation',
				query: {
					group: 1,
					iscart: 0,
					teamid: this.teamId,
					optionId: this.optionId
				}
			});
		},
		setTime(data) {
			//计算时间
			// 判断当前是否在拼团开启时间内
			if (!data) {
				return;
			}
			let time = {};
			let newtime = data * 1000;
			// 获取剩余天数
			time.day = Math.floor(newtime / 1000 / 60 / 60 / 24);
			var daysRound = Math.floor(time.day);
			time.hours = Math.floor(newtime / 1000 / 60 / 60 - 24 * daysRound);
			var hoursRound = Math.floor(time.hours);
			time.minutes = Math.floor(newtime / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound);
			var minutesRound = Math.floor(time.minutes);
			time.seconds = Math.floor(newtime / 1000 - 24 * 60 * 60 * daysRound - 60 * 60 * hoursRound - 60 * minutesRound);
			return time;
		},
		setSku() {
			//选择商品规格
			this.selectArr = [];
			this.shopItemInfo = {};
			this.subIndex = [];
			this.price = 0;
			this.kucun = 0;
			this.getSkuAll();
			this.getSkuList();
			setTimeout(() => {
				uni.hideTabBar();
			}, 200);
		},
		getSkuList() {
			//获取商品的规格
			this.request('goods/getGoodsSpecs', {
				goods_id: this.goodid
			}).then(res => {
				console.log(res);
				this.sku = res.data;
				this.checkItem(-1);
			});
		},
		getSkuAll() {
			//获取商品的所有规格信息 方便匹配对比
			this.request('goods/getGoodsOption', {
				goods_id: this.goodid,
				type: 0
			}).then(res => {
				console.log(res);
				this.skuAllData = res.data;
				console.log(this.skuAllData);
				this.initializeData();
			});
		},
		/**
		 * @param setSkuList 选择规格
		 * @param checkItem 对规格进行筛选 只显示当前选中的
		 * @param initializeData 对规格数据进行处理
		 */
		setSkuList(item, n, index) {
			//设置规格的选中
			console.log(item);
			this.shows = true;
			if (this.selectArr[n] != item) {
				this.$set(this.selectArr, n, item);
				this.$set(this.subIndex, n, index);
			} else {
				this.$set(this.selectArr, n, '');
				this.$set(this.subIndex, n, -1); //去掉选中颜色
			}
			this.checkItem(n);
		},
		checkItem(clickIndex) {
			//对规格进行筛选 如果不符合要求的规格不能选择
			var option = this.sku;
			var x = '';
			for (let i = 0, len = option.length; i < len; i++) {
				//遍历规格列表
				if (i == clickIndex) {
					continue;
				}
				let len2 = option[i].goods_spec_item.length;
				for (let j = 0; j < len2; j++) {
					if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
						continue;
					}
					let choosed_copy = [...this.selectArr];
					this.$set(choosed_copy, i, this.sku[i].goods_spec_item[j].item_title);
					let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
					let data = this.selectArr.join('_');
					this.skuAllData.forEach(e => {
						if (e.title == data) {
							this.kucun = Number(e.inventory);
							this.price = e.price;
							this.numprice = e.price;
							this.optionName = e.title;
							this.optionId = e.option_id;
							console.log(this.optionId);
							console.log(e);
						}
					});
					if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
						this.$set(this.sku[i].goods_spec_item[j], 'isShow', true);
					} else {
						this.$set(this.sku[i].goods_spec_item[j], 'isShow', false);
					}
				}
			}
		},
		initializeData() {
			//计算有多小种可选路径
			console.log('执行了');
			let result = this.skuAllData.reduce(
				(arrs, items) => {
					return arrs.concat(
						items.title.split('_').reduce(
							(arr, item) => {
								return arr.concat(
									arr.map(item2 => {
										//利用对象属性的唯一性实现二维数组去重
										if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
											this.shopItemInfo[[...item2, item]] = items;
										}
										return [...item2, item];
									})
								);
							},
							[[]]
						)
					);
				},
				[[]]
			);
		},
		sub(item) {
			//减少商品
			if (this.number == 1) {
				return;
			} else {
				this.number--;
				this.numprice = this.number * this.price;
			}
		},
		add(item) {
			//增加商品到购物车
			if (this.kucun == 0) {
				return;
			}
			if (this.number >= this.kucun) {
				return;
			}
			this.number++;
			this.numprice = this.number * this.price;
		}
	}
};
</script>

<style lang="scss" scoped>
.Assemble_goods {
	background-color: #f2f2f2;
	overflow: hidden;
	margin-bottom: 100upx;
	.swiper {
		width: 100vw;
		height: 60vw;
		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
	.price {
		background-color: #f23a3a;
		height: 110upx;
		width: 100%;
		.left {
			float: left;
			height: 110upx;
			width: 50%;
			box-sizing: border-box;
			padding: 20upx 30upx;
			color: #ffffff;
			.text1 {
				font-size: 46upx;
				margin-right: 20upx;
			}
			.text2 {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				text-decoration: line-through;
				color: rgba(255, 255, 255, 1);
			}
		}
		.right {
			float: right;
			height: 110upx;
			width: 50%;
			text-align: center;
			background: url('');
			background-size: cover;
			background-repeat: no-repeat;
			> p {
				font-size: 22upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(242, 58, 58, 1);
				line-height: 40rpx;
			}
			.time_down {
				position: relative;
				left: 60upx;
				top: 5upx;
			}
		}
	}
}
.goods_name {
	padding: 30upx;
	background-color: #fff;
	.left {
		margin-bottom: 20upx;
		position: relative;
		.text1 {
			color: #e4393c;
			font-size: 40upx;
			font-weight: bold;
			margin-right: 10upx;
		}
		.text2 {
			color: #999999;
			text-decoration: line-through;
			margin-top: 10upx;
			font-size: 24upx;
		}
	}
	.p1 {
		overflow: hidden;
		.hot_ig {
			width: 40upx;
			height: 40upx;
			float: left;
			margin-right: 10upx;
		}
		.hot {
			font-size: 20upx;
			height: 40upx;
			line-height: 40upx;
			padding: 0upx 10upx;
			color: #ffffff;
			background-color: #f23a3a;
			border-radius: 8upx;
			margin-right: 10upx;
			float: left;
			box-sizing: border-box;
			margin-top: 5upx;
		}
		.name {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.text1 {
			font-size: 20upx;
			height: 40upx;
			line-height: 40upx;
			padding: 0upx 10upx;
			color: #f23a3a;
			border: 1upx solid #f23a3a;
			border-radius: 8upx;
			margin-right: 10upx;
			float: left;
			box-sizing: border-box;
			margin-top: 5upx;
			margin-right: 10upx;
		}
		.text2 {
			font-size: 32upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
			float: left;
			line-height: 40upx;
			width: 525upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		image {
			width: 25upx;
			height: 25upx;
			float: right;
			padding: 15upx;
			background-color: pink;
			box-sizing: content-box;
			border-radius: 50%;
		}
	}
	.p2 {
		font-size: 24upx;
		height: 26upx;
		line-height: 26upx;
		margin-top: 20upx;
		color: #333333;
		margin-bottom: 10upx;
		.text1 {
			color: #646464;
		}
		.text2 {
			color: #f23a3a;
		}
	}
}

.goods_bottom {
	margin-top: 20upx;
	background-color: #fff;
	padding: 20upx 30upx;
	box-sizing: content-box;
	> .p1 {
		height: 40upx;
		line-height: 40upx;
		border-bottom: 1upx solid #f2f2f2;
		padding-bottom: 20upx;
		margin-top: 20upx;
		box-sizing: content-box;
		transition: all 0.3s;
		&:active {
			transform: scaleX(0.98);
		}
		.text1 {
			font-size: 28upx;
			color: #333333;
		}
		.text2 {
			font-size: 24upx;
			color: #999999;
			float: right;
		}
		.right {
			width: 20upx;
			height: 20upx;
			margin-top: 15upx;
			margin-right: 0;
		}
		image {
			float: right;
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			margin-right: 10upx;
			transform: translateY(-5upx);
		}
	}
	.bottom_box {
		margin-top: 10upx;
		border-bottom: 1upx solid #f2f2f2;
		> .p1 {
			height: 40upx;
			line-height: 40upx;
			.text1 {
				font-size: 24upx;
				color: #333333;
			}
			.text2 {
				float: right;
				color: #999999;
				font-size: 24upx;
				margin-right: 5upx;
			}
			image {
				float: right;
				width: 12upx;
				height: 22upx;
				margin-top: 10upx;
			}
		}
		.view1 {
			overflow: hidden;
			position: relative;
			.p2 {
				width: 40%;
				margin-top: 20upx;
				float: left;
				image {
					width: 50upx;
					height: 50upx;
					border-radius: 50%;
					float: left;
					margin-top: 3upx;
				}
				text {
					font-size: 24upx;
					font-family: Droid Sans Fallback;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					margin-left: 20upx;
				}
			}
			.p3 {
				width: 55%;
				margin-top: 20upx;
				margin-right: 20upx;
				float: right;
				.text1 {
					font-size: 24upx;
					color: #333;
					display: block;
				}
				.text2 {
					float: left;
					font-size: 22upx;
					color: #999999;
					line-height: 60upx;
				}
			}
			.goto {
				width: 100upx;
				height: 46upx;
				background: rgba(242, 58, 58, 1);
				border-radius: 23upx;
				font-size: 22upx;
				color: #ffffff;
				text-align: center;
				line-height: 46upx;
				position: absolute;
				right: 0;
				bottom: 20upx;
			}
		}
	}
}
.submit {
	width: 290upx;
	height: 76upx;
	background: rgba(242, 58, 58, 1);
	border-radius: 38upx;
	font-size: 32upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	position: fixed;
	text-align: center;
	right: 30upx;
	bottom: 10upx;
	line-height: 76upx;
}
.pop_box {
	width: 660upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10px;
	padding: 30upx 20upx;
	box-sizing: content-box;
	.view1 {
		overflow: hidden;
		position: relative;
		border-bottom: 1upx solid #f2f2f2;
		.p2 {
			width: 40%;
			margin-top: 20upx;
			float: left;
			image {
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				float: left;
				margin-top: 3upx;
			}
			text {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-left: 20upx;
			}
		}
		.p3 {
			width: 60%;
			margin-top: 20upx;
			float: right;
			.text1 {
				font-size: 24upx;
				color: #333;
				display: block;
			}
			.text2 {
				float: left;
				font-size: 22upx;
				color: #999999;
				line-height: 60upx;
			}
		}
		.goto {
			width: 100upx;
			height: 46upx;
			background: rgba(242, 58, 58, 1);
			border-radius: 23upx;
			font-size: 22upx;
			color: #ffffff;
			text-align: center;
			line-height: 46upx;
			position: absolute;
			right: 0;
			bottom: 20upx;
		}
	}
	.p4 {
		text-align: center;
		font-size: 28upx;
	}
	.p5 {
		overflow: hidden;
		margin-top: 10upx;
		> text {
			float: left;
			margin: 0 auto;
			color: #999;
			font-size: 22upx;
			line-height: 60upx;
			margin-left: 30%;
		}
		.item {
			display: inline-block;
			width: 35upx;
			margin: 0 10upx;
			color: #fff;
			font-size: 24upx;
			text-align: center;
			background-color: #1989fa;
			border-radius: 5upx;
			margin-top: 7upx;
			height: 40upx !important;
			line-height: 40upx;
		}
	}
	.people {
		overflow: hidden;
		display: flex;
		width: 600upx;
		justify-content: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		// margin-top: 10upx;
		margin: 10upx auto;
		p {
			flex: 1;
			overflow: hidden;
			max-width: 20%;
			min-width: 20%;
			text-align: center;
			margin-bottom: 10upx;
			image {
				width: 50upx;
				height: 50upx;
				border: 2upx dashed rgba(242, 58, 58, 1);
				border-radius: 50%;
				display: block;
				margin: 0 auto;
			}
			text {
				font-size: 24upx;
			}
		}
	}
}
.close {
	width: 88upx;
	height: 88upx;
	display: block;
	margin: 0 auto;
	margin-top: 30upx;
}
.nowAdd {
	width: 130upx;
	height: 46upx;
	background: rgba(242, 58, 58, 1);
	border-radius: 23upx;
	font-size: 22upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	line-height: 46upx;
	margin: 0 auto;
	margin-top: 40upx;
}
.fx_btn {
	overflow: hidden;
	position: absolute;
	right: 0upx;
	top: 15upx;
	width: 60upx;
	height: 60upx;
	border: none;
	border-radius: 50%;
	background-color: #f23a3a;
	padding: 0 !important;
}
.ewm {
	width: 42upx;
	height: 42upx;
	display: block;
	margin: 0 auto;
	margin-top: 10upx;
}
.h5ewm {
	width: 42upx;
	height: 42upx;
	padding: 20upx;
	border-radius: 50%;
	background-color: #f23a3a;
	position: absolute;
	right: 0upx;
	top: 15upx;
	box-sizing: content-box;
}
@keyframes showPopup {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes hidePopup {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes showLayer {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
@keyframes hideLayer {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
.popup {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	display: none;
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 21;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.layer {
		position: fixed;
		z-index: 22;
		bottom: -70%;
		width: 92%;
		padding: 0 4%;
		height: 70vh;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
		// display: flex;
		// flex-wrap: wrap;
		// align-content: space-between;
		box-sizing: content-box;
		.content {
			width: 100%;
			padding: 20upx 0;
		}
		.btn {
			width: 100%;
			height: 100upx;
			.button {
				width: 100%;
				height: 80upx;
				border-radius: 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f47952;
				font-size: 28upx;
			}
		}
	}

	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		display: block;
		.mask {
			animation: hidePopup 0.2s linear both;
		}

		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	&.service {
		.row {
			margin: 30upx 0;
			.title {
				font-size: 30upx;
				margin: 10upx 0;
			}
			.description {
				font-size: 28upx;
				color: #999;
			}
		}
	}
	&.spec {
		.title {
			font-size: 30upx;
			margin: 30upx 0;
		}
		.sp {
			display: flex;
			view {
				font-size: 28upx;
				padding: 5upx 20upx;
				border-radius: 8upx;
				margin: 0 30upx 20upx 0;
				background-color: #f6f6f6;
				&.on {
					padding: 3upx 18upx;
					border: solid 1upx #f47925;
				}
			}
		}
		.length {
			margin-top: 30upx;
			border-top: solid 1upx #aaa;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20upx;
			.text {
				font-size: 30upx;
			}
			.number {
				display: flex;
				justify-content: center;
				align-items: center;
				.input {
					width: 80upx;
					height: 60upx;
					margin: 0 10upx;
					background-color: #f3f3f3;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					input {
						width: 80upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						font-size: 26upx;
					}
				}

				.sub,
				.add {
					width: 60upx;
					height: 60upx;
					background-color: #f3f3f3;
					border-radius: 5upx;
					.icon {
						font-size: 30upx;
						width: 60upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
}
.layers {
	width: 90vw;
	min-height: 50vh;
	overflow: hidden;
	background-color: #fff;
	border-radius: 20upx;
	box-sizing: border-box;
	padding: 30upx;
	.title {
		font-size: 32upx;
		font-weight: bold;
		color: #333333;
		height: 60upx;
	}
	.sku_scroll {
		height: 50vh;
		overflow: hidden;
		margin-top: 30upx;
		.lists {
			overflow: hidden;
			margin-bottom: 20upx;
			.sku_name {
				color: #999999;
				font-size: 28upx;
			}
			.list_box {
				overflow: hidden;
				p {
					float: left;
					height: 60upx;
					line-height: 60upx;
					padding: 0 30upx;
					border: 1upx solid #eeeeee;
					font-size: 24upx;
					border-radius: 15upx;
					margin-right: 20upx;
					margin-top: 20upx;
					transition: all 0.3s;
				}
			}
		}
	}
}
.close {
	height: 80upx;
	width: 80upx;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	margin-top: 30upx;
}
.price_box {
	// height: 10vh;
	.number {
		display: flex;
		float: right;
		overflow: hidden;
		.input {
			width: 50upx;
			height: 50upx;
			margin: 0 10upx;
			// background-color: #f3f3f3;
			input {
				width: 50upx;
				height: 50upx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 26upx;
			}
		}
		.sub,
		.add {
			width: 40upx;
			height: 40upx;
			background-color: #f2f2f2;
			border-radius: 50%;
			.icon {
				font-size: 22upx;
				width: 40upx;
				height: 40upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
			}
		}
		.add {
			background-color: #ff0000;
		}
		.sub {
			.icon {
				color: #b3b3b3;
			}
		}
	}
	.p1 {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		.text1 {
			color: #999999;
			font-size: 24upx;
		}
		.text2 {
			color: #333333;
			margin-right: 10upx;
			font-size: 24upx;
		}
	}
	.bottom {
		height: 80upx;
		margin-top: 30upx;
		.left {
			font-size: 40upx;
			color: #f9493d;
			float: left;
			margin-top: 20upx;
		}
		.right {
			//
			// padding: 10upx 20upx;
			// background-color: #ffd25f;
			// color: #333;
			// margin-top: 20upx;
			// border-radius: 15upx;
			// height: 100upx;
			width: 290upx;
			height: 76upx;
			background: rgba(242, 58, 58, 1);
			border-radius: 38upx;
			font-size: 32upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			float: right;
			text-align: center;
			line-height: 76upx;
		}
		.noactive {
			background-color: #ccc;
			opacity: 0.4;
			color: #333;
			pointer-events: none;
			width: 290upx;
			height: 76upx;
			background: rgba(242, 58, 58, 1);
			border-radius: 38upx;
			font-size: 32upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			float: right;
			text-align: center;
			line-height: 76upx;
		}
	}
}
.noneActive {
	//规格禁用
	background-color: #ccc;
	opacity: 0.4;
	color: #000;
	pointer-events: none;
}
.productActive {
	border: 1upx solid #1a1a29;
}
.kucun {
	color: #999999;
	font-size: 24upx;
	margin-bottom: 5upx;
}
.item {
	display: inline-block;
	width: 35upx;
	margin: 0 10upx;
	color: #fff;
	font-size: 24upx;
	text-align: center;
	background-color: #1989fa;
	border-radius: 5upx;
	margin-top: 7upx;
	height: 40upx !important;
	line-height: 40upx;
}
/deep/.uni-countdown__number {
	width: 45upx !important;
	margin: 0 10upx;
	height: 40upx !important;
	color: #fff;
	font-size: 24upx;
	text-align: center;
	border-radius: 5upx;
	margin-top: 10upx;
}
</style>
